---
title: Publica en NPM
description: Aprende a publicar componentes de Astro en NPM
i18nReady: true
---
import { Steps } from '@astrojs/starlight/components';
import { FileTree } from '@astrojs/starlight/components';

¿Construyendo un nuevo componente Astro? **¡Publícalo en [npm](https://npmjs.com/)!**

Publicar un componente de Astro es una excelente manera de reutilizar tu trabajo y compartirlo con la comunidad de Astro. Los componentes de Astro se pueden publicar e instalar directamente desde NPM, como cualquier otro paquete de JavaScript.

¿Buscas inspiración? Mira algunos de nuestros [temas](https://astro.build/themes/) y [componentes](https://astro.build/integrations/) favoritos de la comunidad de Astro. También puedes [buscar en npm](https://www.npmjs.com/search?q=keywords:astro-component,withastro) para ver el catálogo completo.

:::tip[¿No quieres hacerlo solo?]
Consulta nuestra [plantilla de componente de Astro](https://github.com/astro-community/component-template) para obtener una plantilla lista para usar y mantenida por nuestra comunidad.
:::

## Inicio rápido

Para comenzar a desarrollar tu componente rápidamente, puedes utilizar una plantilla que ya está configurada para ti.

```bash
# Inicializar la plantilla de componentes de Astro en una nueva carpeta
# npm
npm create astro@latest my-new-component-directory -- --template component
# yarn
yarn create astro my-new-component-directory --template component
# pnpm
pnpm create astro@latest my-new-component-directory -- --template component
```

## Creando un paquete

:::note[Prerequisitos]
Antes de empezar, será útil tener una comprensión básica de:

- [Node modules](https://docs.npmjs.com/creating-node-js-modules)
- [Manifiesto del paquete (`package.json`)](https://docs.npmjs.com/creating-a-package-json-file)
- [Workspaces](https://docs.npmjs.com/cli/v7/configuring-npm/package-json#workspaces)
:::

Para crear un nuevo paquete, configura tu entorno de desarrollo para utilizar **Workspaces** dentro de tu proyecto. Esto te permitirá desarrollar tu componente junto con una copia funcional de Astro.

<FileTree>
- my-new-component-directory/
  - demo/
    - ... para pruebas y demostraciones
  - package.json
  - packages/
    - my-component/
      - index.js
      - package.json
      - ... archivos adicionales utilizados por el paquete
</FileTree>

Este ejemplo, llamado `mi-proyecto`, crea un proyecto con un solo paquete, llamado `mi-componente`, y un directorio `demo/` para probar y demostrar el componente.

Esto se configura en el archivo `package.json` de la raíz del proyecto:

```json
{
  "name": "mi-proyecto",
  "workspaces": ["demo", "packages/*"]
}
```

En este ejemplo, se pueden desarrollar varios paquetes juntos desde el directorio `packages`. También se puede hacer referencia a estos paquetes desde `demo`, donde puedes instalar una copia funcional de Astro.

```shell
# npm
npm create astro@latest demo -- --template minimal
# yarn
yarn create astro demo --template minimal
# pnpm
pnpm create astro@latest demo -- --template minimal
```

Hay dos archivos iniciales que conformarán tu paquete individual: `package.json` e `index.js`.

### `package.json`

El `package.json` en el directorio del paquete incluye toda la información relacionada a tu paquete, incluida su descripción, dependencias y cualquier otro metadato.

```json
{
  "name": "mi-componente",
  "description": "Descripción del componente",
  "version": "1.0.0",
  "homepage": "https://github.com/owner/project#readme",
  "type": "module",
  "exports": {
    ".": "./index.js",
    "./astro": "./MyAstroComponent.astro",
    "./react": "./MyReactComponent.jsx"
  },
  "files": ["index.js", "MyAstroComponent.astro", "MyReactComponent.jsx"],
  "keywords": ["astro", "withastro", "astro-component", "...", "..."]
}
```

#### `description`

Una breve descripción de tu componente que será utilizado para ayudar a otros a saber lo que hace.

```json
{
  "description": "Un generador de componentes de Astro"
}
```

#### `type`

El formato del módulo utilizado por Node.js y Astro para interpretar tus archivos `index.js`.

```json
{
  "type": "module"
}
```

Utiliza `"type": "module"` para que `index.js` se pueda usar como un punto de entrada con `import` y `export`.

#### `homepage`

La URL de la página de inicio del proyecto.

```json
{
  "homepage": "https://github.com/owner/project#readme"
}
```

Esta es una excelente manera de dirigir a los usuarios a una demostración en línea, documentación o página de inicio de tu proyecto.

#### `exports`

Los puntos de entrada de un paquete cuando se importan por nombre.

```json
{
  "exports": {
    ".": "./index.js",
    "./astro": "./MyAstroComponent.astro",
    "./react": "./MyReactComponent.jsx"
  }
}
```

En este ejemplo, importar `my-component` usaría `index.js`, mientras que importar `my-component/astro` o `my-component/react` usaría `MyAstroComponent.astro` o `MyReactComponent.jsx` respectivamente.

#### `files`

Una optimización opcional para excluir archivos innecesarios del paquete enviado a los usuarios a través de npm. Ten en cuenta que **solo los archivos enumerados aquí se incluirán en tu paquete**, por lo que, si agregas o cambias los archivos necesarios para que tu paquete funcione, debes actualizar esta lista en consecuencia.

```json
{
  "files": ["index.js", "MyAstroComponent.astro", "MyReactComponent.jsx"]
}
```

#### `keywords`

Una serie de palabras clave relevantes para tu componente, utilizado para ayudar a otros usuarios a [encontrar tu componente en npm](https://www.npmjs.com/search?q=keywords:astro-component,withastro) y en cualquier otro catálogo de búsqueda.

Agrega `astro-component` o `withastro` como palabra clave especial para maximizar su descubrimiento en el ecosistema de Astro.

```json
{
  "keywords": ["astro-component", "withastro", "... etc", "... etc"]
}
```

:::tip
¡Nuestra [biblioteca de integraciones](https://astro.build/integrations/) también utiliza palabras clave! [Descubre más adelante](#biblioteca-de-integraciones) una lista completa de las palabras clave que buscamos en NPM.
:::

---

### `index.js`

El **punto de entrada del paquete** principal que se utiliza cada vez que se importa tu paquete.

```js
export { default as MyAstroComponent } from './MyAstroComponent.astro';

export { default as MyReactComponent } from './MyReactComponent.jsx';
```

Esto te permite empaquetar múltiples componentes juntos en una sola interfaz.

#### Ejemplo: Usando importaciones nombradas

```astro
---
import { MyAstroComponent } from 'my-component';
import { MyReactComponent } from 'my-component';
---
<MyAstroComponent />
<MyReactComponent />
```

#### Ejemplo: Usando importaciones module-name

```astro
---
import * as Example from 'example-astro-component';
---
<Example.MyAstroComponent />
<Example.MyReactComponent />
```

#### Ejemplo: uso de importaciones individuales

```astro
---
import MyAstroComponent from 'example-astro-component/astro';
import MyReactComponent from 'example-astro-component/react';
---
<MyAstroComponent />
<MyReactComponent />
```

---

## Desarrollando tu paquete

Astro no tiene un "modo de paquete" dedicado para el desarrollo. En su lugar, debes usar un proyecto demo para desarrollar y probar tu paquete dentro de tu proyecto. Este puede ser un sitio web privado que solo se use para desarrollo, o un sitio web público de demostración/documentación para tu paquete.

Si estás extrayendo componentes de un proyecto existente, puedes incluso continuar usando ese proyecto para desarrollar tus componentes ahora extraídos.

## Probando tus componentes

Astro actualmente no incluye un test runner. Esto es algo que nos gustaría abordar. _(Si estás interesado en ayudar con esto, [¡únete a nosotros en Discord!](https://astro.build/chat))_

Mientras tanto, nuestra recomendación actual para las pruebas es:

<Steps>
1. Agrega un directorio `fixtures` de prueba a su directorio `demo/src/pages`.

2. Agrega una nueva página para cada prueba que desee ejecutar.

3. Cada página debe incluir un uso distinto de los componentes que te gustaría probar.

4. Ejecuta `astro build` para construir tus fixtures, luego compara los resultados en el directorio `dist/__fixtures__/` con los resultados esperados.
   <FileTree>
   - my-project/demo/src/pages/\_\_fixtures\_\_/
     - test-name-01.astro
     - test-name-02.astro
     - test-name-03.astro
   </FileTree>
</Steps>

## Publicando tu componente

Una vez que tengas tu paquete listo, puedes publicarlo en npm utiliza el comando `npm publish` para publicar tu paquete. Si falla, asegúrate de haber iniciado sesión con `npm login` y de que tu archivo `package.json` esté correcto. Si tiene éxito, ¡has terminado!

Es importante destacar que no hay un paso de "build" para los paquetes de Astro. Cualquier tipo de archivo que Astro admita de forma nativa, como `.astro`, `.ts`, `.jsx` y `.css`, puede ser publicado directamente sin necesidad de un paso de construcción adicional.

Si necesitas agregar otro tipo de archivo que no sea admitido de forma nativa por Astro, deberás agregar un paso de construcción a tu paquete. Este ejercicio avanzado queda a tu cargo y dependerá de tus necesidades específicas.

## Biblioteca de integraciones

¡Comparte tu arduo trabajo agregando tu integración a nuestra [biblioteca de integraciones](https://astro.build/integrations/)!

:::tip
¿Necesitas ayuda para crear tu integración o simplemente quieres conocer a otros creadores de integraciones? Tenemos un canal dedicado `#integrations` en nuestro [servidor de Discord](https://astro.build/chat). ¡Ven a saludarnos!
:::

### Datos en `package.json`

La biblioteca se actualiza automáticamente semanalmente, agregando todos los paquetes publicados en NPM con la palabra clave `astro-component` o `withastro`.

La biblioteca de integraciones lee los datos `name`, `description`, `repository` y `homepage` de tu `package.json`.

¡Los avatares son una excelente manera de resaltar tu marca en la biblioteca! Una vez que se publique tu paquete, puedes [crear una issue en GitHub](https://github.com/withastro/astro.build/issues/new/choose) con tu avatar adjunto y lo agregaremos al listado.

:::tip
¿Necesitas anular la información que nuestra biblioteca lee de NPM? ¡No hay problema! [Crea una issue](https://github.com/withastro/astro.build/issues/new/choose) con la información actualizada y nos aseguraremos de que el `nombre`, la `descripción` o la `página de inicio` personalizados sean utilizados en su lugar.
:::

### Categorías

Además de la palabra clave requerida `astro-component` o `withastro`, también se utilizan otras palabras clave especiales para organizar automáticamente los paquetes. Incluir cualquiera de las palabras clave a continuación agregará tu integración a la categoría en nuestra biblioteca de integraciones.

| categoría                 | palabras clave                               |
| ------------------------- | -------------------------------------------- |
| Accesibilidad             | `a11y`, `accessibility`                      |
| Adaptadores               | `astro-adapter`                              |
| Analíticas                | `analytics`                                  |
| CSS + UI                  | `css`, `ui`, `icon`, `icons`, `renderer`     |
| Frameworks                | `renderer`                                   |
| Cargadores de contenido   | `astro-loader`                               |
| Imágenes + Medios         | `image`, `images`, `media`                   |
| Rendimiento + SEO         | `performance`, `perf`, `seo`, `optimization` |
| Barra de herramientas     | `devtools`, `dev-overlay`, `dev-toolbar`     |
| Utilidades                | `tooling`, `utils`, `utility`                |

Los paquetes que no incluyan ninguna palabra clave que coincida con una categoría se mostrarán como `Uncategorized`.

## Comparte

Te alentamos a compartir tu trabajo, y realmente nos encanta ver lo que crean nuestros talentosos Astronautas. ¡Ven y comparte lo que creas con nosotros en nuestro [Discord](https://astro.build/chat) o menciona [@astrodotbuild](https://twitter.com/astrodotbuild) en un Tweet!
